Rodrigo

Hi Alex, Sorry for the late answer, this one went through the weekend cracks 🙏 I'm not 100% sure of what exactly is going on here TBH, I fiddled with your demo for a bit and try different approaches and the only one that seems to work is this: btn.addEventListener( "click", (e) => { portfolioScrollTrigger.disable(); scrollObserver.disable(false, false); lenis.scrollTo("#footer", { onComplete: () => { portfolioScrollTrigger.enable(); lenis.stop(); gsap.set(window, { scrollTo: "#footer", onComplete: () => lenis.start(), }) } }); }, true ); It predicates on loading the ScrollTo Plugin as well. I tried this: btn.addEventListener( "click", (e) => { portfolioScrollTrigger.disable(); scrollObserver.disable(false, false); lenis.scrollTo("#footer", { onComplete: () => { portfolioScrollTrigger.enable(); lenis.stop(); lenis.scrollTo("#footer", { immediate: true, // ignore duration and lerp onComplete: () => lenis.start(), }) } }); }, true ); But the scroll position was off, while the ScrollTo Plugin lands on the right spot. Is not the prettiest solution but it gets the job done. Hopefully this helps. Happy Tweening!

Hi, This is mostly about trial and error with translating the element as well as scaling it. Here is a fork of your demo: https://codepen.io/GreenSock/pen/GRammKy Hopefully this helps. Happy Tweeing!

Hi @Derto and welcome to the GSAP Forums! I forked your demo and tested it on an iPad running iOS 17 and waited for almost 5 minutes after reloading and I can't seem to reproduce the issue you're mentioning. Maybe there are other specific steps to reproduce this that I'm missing here Is worth noticing that the versions of GSAP and ScrollTrigger you're using are a bit outdated (3.11.5). I updated them to the latest versions in the fork I created and tested on my iPad: https://codepen.io/GreenSock/pen/NWVjpVL Here is the debug version (no iframes) https://cdpn.io/pen/debug/NWVjpVL Hopefully this helps. If not, please be more specific on how to replicate the problem and the specific devices and iOS versions where you're seeing the problem. Happy Tweening!

I forgot we recommend using GSAP MatchMedia instead of ScrollTrigger's MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() While ScrollTrigger's MatchMedia method still works, it has been deprecated in favor of the one on GSAP's Core Happy Tweening!

Hi, Your demo is not loading neither the GSAP core file nor ScrollTrigger, that's why is not working. I forked and made some changes to it: https://codepen.io/GreenSock/pen/oNRWZMx Hopefully this helps. Happy Tweening!

Hi, Honestly I can't recall this issue with normalizeScroll. Can you create a minimal demo (emphasis on minimal) that clearly illustrates the problem? What I can see is that the touchend event is being called regardless of the vertical swipe of the finger. Maybe the information in this thread and Jack's explanation can help: Hopefully this helps. Happy Tweening!

Hi, Maybe this demos can help getting started: https://codepen.io/GreenSock/pen/wvYVjvb https://codepen.io/GreenSock/pen/rNbELKO https://codepen.io/GreenSock/pen/pomvabo Happy Tweening!

Exactly, check the docs: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch If isTouch is equal to 1: 1 - touch-only device (like a phone) If is not 1, then is not a phone/tablet. Happy Tweening!

Hi, Yeah in the next release we'll have the option to use both numbers and strings, for now you can either rely on Mitchel's suggestion to use numbers or in your project, go to the node_modules/gsap/types folder and in the gsap-core.d.ts file change this: type Point2D = { x: number, y: number }; type Position = number | string; To this: type Position = number | string; type Point2D = { x: Position, y: Position }; With that there should not be any issues while compiling. Hopefully this helps. Happy Tweening!

Hi, This might be about the type definitions here: https://github.com/greensock/GSAP/blob/f836a3f0002d6ea00f456a461c7e2976e0ec3f38/types/gsap-core.d.ts#L33 As you can see the Point2D type expects number and you're passing a number. We'll look into this and get back to you. Please stand by. Happy Tweening!

The only thing I can think of is scroll-beahvior: smooth;, we've seen a fair amount of issues related to that here in the forums. Also I would be careful with scroll-padding-top since that could lead to some issues with ScrollTrigger calculations: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top Happy Tweening!

Hi @lagalga, While I'm able to understand your question, please make an extra effort and post in english so everyone can check your question. Unfortunately without a minimal demo there is not a lot we can do to help. You can look in our ScrollTrigger How-To and Showcase collections and see if you find something there that helps: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Happy Tweening!

Hi, That goes in a defaults config object: https://gsap.com/resources/getting-started/timelines/#timeline-defaults const tl = gsap.timeline({ paused: true, defaults: { ease: "power2.inOut", }, }); That gives every child tween in the timeline the same easing function, but that would have no effect if the individual tween has a specific easing function in it: const tl = gsap.timeline({ defaults: { ease: "power2.inOut", // default ease for all child instances }, }); tl.to(elementOne, { x: 200, // default easing here power2.inOut }) .to(elementOne, { y: 200, ease: "none", // specific easing function overrides the default one }); Finally this look odd to me: tl.add( tl.to(".logo", { x: "500px", duration: 1 }) ); A to() method returns the timeline itself, so basically you're adding the timeline to itself: https://gsap.com/docs/v3/GSAP/Timeline/to()#returns--self Just use a to(), from() and fromTo() method instead of add() it makes more sense. tl.to(".logo", { x: "500px", duration: 1 }); That in fact would use the default easing function set in the timeline's default config object. Hopefully this clear things up. Happy Tweening!

Yep, you can use ScrollTrigger's isTouch property in order to known the device being used: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch You can combine that with GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Maybe something like this: if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } In combination with MatchMedia: const mm = gsap.matchMedia(); mm.add("(max-width: 1024)", () => { if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } }); That would be for screens below most tablets in landscape. Hopefully this helps. Happy Tweening!

Hi, I checked the link on an iPad running iOS 17 on chrome and safari and I can't see anything wrong with it. That demo is not using normalizeScroll() though, since the address bar hides/show when you swipe down/up. Be sure to check the docs on that regard: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Other option you could try is ignoreMobileResize in the ScrollTrigger global config: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config() ScrollTrigger.config({ ignoreMobileResize: true, }); Once again, without a minimal demo that clearly illustrates the issue is really hard for us to see what could be the problem. Happy Tweening!